<template>
  <view class="main w100">
    <view class="banner w100">
      <image class="w100" src="/static/index/banner.jpg" mode="widthFix"></image>
      <view class="p">草堂镇-欧营村</view>
    </view>
    <view class="main-boxs" v-if="menus.length > 0">
      <view class="main-card w100" :class="index == 0 ? 'frist-card' : ''" v-for="(item, index) in menus" :key="index">
        <view class="title w100" @click="goPage(item)">
          <image class="icon" :src="item.icon" mode="widthFix"></image>
          <text>{{ item.title }}</text>
        </view>

        <view class="content w100">
          <view class="content-news" v-if="item.news && item.news.length && item.news.length > 0">
            <view v-for="(item2, index2) in item.news" :key="index2" @click="goPage(item2)">
              <view class="p">
                <view>{{ item2.title }}</view>
                <image class="icon" :src="item2.icon" mode="widthFix"></image>
              </view>
              <view class="p">{{ item2.info }}</view>
            </view>
          </view>

          <view class="content-menu" v-if="item.children && item.children.length && item.children.length > 0">
            <view v-for="(item2, index2) in item.children" :key="index2" @click="goPage(item2)">
              <view class="p">
                <image class="icon" :src="item2.icon" mode="widthFix"></image>
              </view>
              <view class="p">{{ item2.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      menus: [],
    }
  },
  onLoad() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      this.menus = [
        {
          title: '乡村治理',
          icon: '/static/index/icon13.png',
          url: '',
          children: [
            {
              title: '事件上报',
              icon: '/static/index/icon18.png',
              url: '/pages/eventReporting/index',
            },
            {
              title: '在线预约',
              icon: '/static/index/icon21.png',
              url: '/pages/preBook/index',
            },
            {
              title: '供需服务',
              icon: '/static/index/icon11.png',
              url: '/pages/supply/list',
            },
          ],
          news: [
            {
              title: '线上培训',
              info: '脐橙种植要点',
              icon: '/static/index/icon8.png',
              url: '/pages/train/list',
            },
            {
              title: '公示公告',
              info: '重庆这些小区将被改造',
              icon: '/static/index/icon9.png',
              url: '/pages/announcement/list',
            },
          ],
        },
        {
          title: '政务办公',
          icon: '/static/index/icon3.png',
          url: '',
          children: [
            {
              title: '事件处理',
              icon: '/static/index/icon7.png',
              url: '/pages/eventList/index',
            },
            {
              title: '信息预警',
              icon: '/static/index/icon19.png',
              url: '/pages/message/list',
            },
          ],
        },
        {
          title: '一键直达',
          icon: '/static/index/icon6.png',
          url: '',
          children: [
            {
              title: '渝快政',
              icon: '/static/index/icon1.png',
              url: '',
            },
            {
              title: '渝快办',
              icon: '/static/index/icon1.png',
              url: '',
            },
            {
              title: '森林防火',
              icon: '/static/index/icon4.png',
              url: '',
            },
          ],
        },
      ]
    },
    goPage(item) {
      if (item.url) {
        if (item.url.indexOf('http') == 0) {
        } else {
          uni.navigateTo({
            url: item.url,
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

image {
  background: none;
}

.main {
  // min-height: 100vh;
  background: #f8f8fa;
  padding: 0 0 20rpx;

  .banner {
    margin: 0;
    position: relative;
    z-index: 2;

    .p {
      width: 220rpx;
      height: 46rpx;
      font-size: 33rpx;
      font-weight: 800;
      text-align: left;
      color: #ffffff;
      position: absolute;
      left: 33rpx;
      top: 80rpx;
    }
  }

  .main-boxs {
    width: 694.44rpx;
    margin: 0 auto;

    .main-card {
      background: #ffffff;
      border-radius: 16.67rpx;
      position: relative;
      z-index: 4;
      margin: 0 0 33rpx;
      padding: 34rpx 28rpx;

      .title {
        display: flex;

        .icon {
          width: 48rpx;
        }

        text {
          font-size: 33rpx;
          font-weight: 800;
          text-align: left;
          color: #333333;
          line-height: 48rpx;
          margin-left: 20rpx;
        }
      }

      .content {
        .content-news {
          display: flex;
          justify-content: space-between;
          margin-top: 38rpx;

          > view {
            width: 312rpx;
            height: 122rpx;
            background: #f2f7fd;
            border-radius: 8rpx;
            padding: 20rpx;
            line-height: 44rpx;

            > .p {
              width: 100%;
              text-align: center;
              font-weight: 400;
              text-align: left;
              display: flex;
              color: #999;
              font-size: 22rpx;

              image {
                width: 39rpx;
                height: 39rpx;
              }

              &:first-child {
                color: #333333;
                font-size: 27rpx;
                line-height: 39rpx;
                justify-content: space-between;
              }
            }
          }
        }

        .content-menu {
          display: inline-block;
          margin-top: 38rpx;

          > view {
            display: inline-block;
            margin-right: 70rpx;

            > .p {
              text-align: center;

              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
      }

      &.frist-card {
        margin-top: -114rpx;
      }
    }
  }
}
</style>